<template>
	<view class="p-3 flex  align-start border-bottom border-light-secondary">
		<!-- <free-avater size="150" :src="item.avatar">
		</free-avater> -->
		<image :src="item.avatar" mode="aspectFill"  style="width:51px;height:51px !important;">
		</image>
		<view class="pl-2 flex-1 flex flex-column">
			<text class="font-md text-hover-primary mb-1">{{item.user_name}}</text>
			<text class="font-md text-dark mb-1">{{item.content}}</text>
			<view class="py-2 flex flex-wrap" v-if="item.image.length">
				<block v-for="item1 in item.image">
					<image :src="item1" class="rounded" style="max-width: 500rpx;max-height:350rpx;"
						@click="priview(item1)" v-if="item.image.length == 1"></image>
					<image :src="item1" mode="aspectFill" v-else class="bg-secondary mr-2 mb-2 rounded"
						@click="priview(item1)" style="width: 160rpx;height:180rpx;"></image>
				</block>
			</view>
			<view class="" v-if="item.video">
				<video :src="item.video" controls style="height: 300rpx;width: 500rpx;" loop
				></video>
			</view>
			<view class="justify-between flex align-center">
				<text class="font-sm text-light-muted ">{{item.created_at|formatTime}}</text>
				<view class="rounded px-1 bg-light" @click="action(item,index)">
					<text class="text-hover-primary iconfont font">&#xe62a;</text>
				</view>

			</view>
			
			
			<view class="bg-light mt-2" >
				<view class="border-bottom flex align-start p-2 " v-if="item.likes.length>0">
					<text class="flex-shrink text-hover-primary iconfont font-md">&#xe637;</text>
					<view class="flex flex-1 flex-wrap ml-1">
						<text class="font text-hover-primary ml-1" v-for="item11 in item.likes">{{item11.name}}</text>
						
					</view>
				</view>
				<view class="flex align-start p-2" v-if="item.comments.length>0">
					<text class="flex-shrink iconfont font-md text-hover-primary">&#xe64e;</text>
					<view class="flex flex-column flex-1 ml-2">
						
						<view class="flex flex-wrap" v-for="item2 in item.comments"  @click="openpl(item2.user.id,item2.user.name,item.moment_id)">
							
							<text class="text-hover-primary font" v-if="item2.reply == null">{{item2.user.name}}:</text>
							<text class="text-hover-primary font" v-else>{{item2.user.name}} 回复  {{item2.reply.name}}:</text>
							

							<text class="text-dark font flex-1">{{item2.content}}</text>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
	</view>

</template>

<script>
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import $T from '@/common/free-lib/time.js';
	export default {
		components: {
			freeAvater
		},
		props: {
			item: Object,
			index: Number
		},

		filters: {
			formatTime(value) {

				return $T.gettime(value)
			}
		},
		methods: {
			action(item,index){
				this.$emit("action",{item,index})
			},
			openpl(e,f,g){
		this.$emit("openpl",{e,f,g})
				
			},
			priview(src) {
				console.log(src, "src");
				uni.previewImage({
					current: src,
					urls: this.item.image.map(item => item.src)
				})
			}
		}
	}
</script>

<style>
</style>
